<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>

<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
    String webSocketPath = request.getServerName() + ":" + request.getServerPort() + path;
%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <base href="<%=basePath%>">
    <title>补偿器模型更新</title>
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="This is my page">

    <link rel="stylesheet" type="text/css" href="jquery/easyui1.4.2/themes/gray/easyui.css">
    <link rel="stylesheet" type="text/css" href="jquery/easyui1.4.2/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="css/assets/css/bootstrap.min.css"/>
    <link rel="stylesheet" type="text/css" href="css/assets/css/ace.min.css"/>
    <link rel="stylesheet" type="text/css" href="mintor/compensatormanage/js/webuploader.css"/>

    <script type="text/javascript" src="jquery/jquery-1.8.3.min.js"></script>
    <script type="text/javascript" src="jquery/easyui1.4.2/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="jquery/easyui1.4.2/locale/easyui-lang-zh_CN.js"></script>
    <script src="http://cdn.hcharts.cn/highcharts/highcharts.js"></script>
    <script src="http://cdn.hcharts.cn/highcharts/modules/exporting.js"></script>
    <script type="text/javascript" src="jquery/underscore-min.js"></script>
    <script type="text/javascript" src="mintor/content/js/view.js"></script>
    <script type="text/javascript" src="mintor/content/js/search.js"></script>
    <script type="text/javascript" src="mintor/compensatormanage/js/webuploader.js"></script>

    <style type="text/css">
        .btn-success,
        .btn-success:hover {
            background-color: #92c0ea !important;
            border-color: #92c0ea
        }

        .btn-success,
        .btn-success :active {
            background-color: #92c0ea !important;
            border-color: #92c0ea
        }

        .btn-success,
        .btn-success:focus {
            background-color: #92c0ea !important;
            border-color: #92c0ea
        }

        .header.green {
            border-bottom-color: #92c0ea;
        }

        .green {
            color: #92c0ea !important;
        }

        .widget-box {
            border-bottom: 0px;
        }

        .panel-body {
            padding: 0px;
        }

        input[readonly] {
            background: #ffffff !important;
            cursor: default;
        }
        #tab1 thead, #tab1 tr
        {
            border-top-width: 1px;
            border-top-style: solid;
            border-top-color: rgb(211, 202, 221);
            font-family:"微软雅黑";
        }
        #tab1
        {
            border-bottom-width: 1px;
            border-bottom-style: solid;
            border-bottom-color: rgb(211, 202, 221);
        }
        #tab1 td, #tab1 th {
            padding: 5px 10px;
            font-size: 8px;
            font-family: Verdana;
            color: rgb(95, 74, 121);
        }
        #tab1 tr:nth-child(even) {
            background: rgb(223, 216, 232)
        }
        #tab1 tr:nth-child(odd) {
            background: #FFF
        }
    </style>

    <script type="text/javascript">
        var socketPath = "<%=webSocketPath%>";
        var type = 5;								//5:未确定

    </script>
    <script type="text/javascript">
        window.onload = function () {
            // 变色特效
            var backgroundElement = window.top.cfgetTopBackgroundElement();
            $(backgroundElement).css("background", "rgba(126,110,176,0.9)");

            var oChannel = $("#selectchannel");
            var oMonitor = $("#selectmonitor");
            var oParameter = document.getElementById('txt3');
            var oTab = document.getElementById('tab1');

            $('#selectchannel').combobox({
                valueField: 'value',
                textField: 'text',
                //panelHeight: 'auto',
                editable: false,
                onChange: function (newValue) {				// 组合框变化响应函数
                    var select = $('#selectchannel');
                    if(select.combobox("getValue")=="常数"){
                        $('#selectmonitor').combobox('disable');
                        $('#selectmonitor').combobox('setValue','0');
                    }
                    else{
                        $('#selectmonitor').combobox('enable');
                        $('#selectmonitor').combobox('setValue','请选择');
                    }
                }
            });

//           添加参数按键响应事件
            $("#btn_add").click(function () {
//              当前有多少行
                var channelnum;
                var monitornum;
                if(oChannel.combobox("getValue")=="常数") {
                    channelnum = 33;
                    monitornum = 0;
                }
                if(oChannel.combobox("getValue")!="常数") {
                    for (i = 1; i < 33; i++) {
                        if (oChannel.combobox("getValue") == "通道" + i) {
                            channelnum = i;
                        }
                    }
                    for (i = 1; i < 21; i++) {
                        if (oMonitor.combobox("getValue") == "节点" + i) {
                            monitornum = i;
                        }
                    }
                }
                var rowNums = oTab.rows.length;
//              没东西的时候不添加
                if(oChannel.combobox("getValue")=="请选择"|| oMonitor.combobox("getValue")=="请选择"||oParameter.value==""){
                    return;
                }

//              先检查是否存在表中
                for(var i=1;i<rowNums;i++){
                    var tabRowChannel = oTab.rows[i].cells[1].innerHTML;
                    var tabRowMonitor = oTab.rows[i].cells[2].innerHTML;
                    if(tabRowChannel==channelnum && tabRowMonitor==monitornum){
                        alert("该节点已存在！");
                        return;
                    }
                }
                //常数项放在最前面
                if(oChannel.combobox("getValue")=="常数") {
                    rowNums = 1;
                    //oMonitor.combobox("getValue") == 0;
                }

                var rowObj = oTab.insertRow(rowNums); // 添加一行
                rowObj.insertCell(0).innerHTML = oTab.rows.length-1;
                rowObj.insertCell(1).innerHTML = channelnum;
                rowObj.insertCell(2).innerHTML = monitornum;
                rowObj.insertCell(3).innerHTML = oParameter.value;
                rowObj.insertCell(4).innerHTML = '<a>删除</a>';
                rowObj.getElementsByTagName('a')[0].onclick = function () {
                    oTab.deleteRow(this.parentNode.parentNode.rowIndex);
                    // 序号重新编号
                    for(var i=1;i<oTab.rows.length;i++){
                        oTab.rows[i].cells[0].innerHTML=i;
                    }
                }
//              序号重新编号
                for(var i=1;i<oTab.rows.length;i++){
                    oTab.rows[i].cells[0].innerHTML=i;
                }
            });
//           提交参数按键响应事件
            $('#btn_updata').click(function () {
                var rowNums = oTab.rows.length;
                if(rowNums <= 1) {
                    alert("请先填写模型参数！");
                    return;
                }
                if(oTab.rows[1].cells[1].innerHTML!="33") {
                    alert("缺少常数项！");
                    return;
                }
                var str="Alm,zf";
                str += PreFixInterge(rowNums-2,2);
                for(var i=1;i<rowNums;i++){
                    var temp=new String();
                    var tabRowChannel = oTab.rows[i].cells[1].innerHTML;
                    var tabRowMonitor = oTab.rows[i].cells[2].innerHTML;
                    if(tabRowChannel != 33){
                        tabRowChannel -= 1;
                        tabRowMonitor -= 1;
                    }
                    var tabRoParameter = oTab.rows[i].cells[3].innerHTML;
                    str += ',' + PreFixInterge(tabRowChannel,2) + PreFixInterge(tabRowMonitor,2);
                    str += ',' + tabRoParameter;
                }
                str=str+'\r\n';
                $.ajax({
                    cache: false,
                    url: "compensator/updateparameter",			// 根据通道类型来加载传感器编号
                    data: {updateorder:"SRet_prm",cptNum:"SCPT-002",parameter:str},
                    type: "POST",
                    dataType: "json",
                    success: function (result) {					// 加载传感器编号到传感器编号组合框
                        if (result.success == true) {
                            alert("参数更新成功！");
                            displayTestCCD("prm");
                        } else {
                            alert("设备不在线或参数指令错误！");
                            return false;
                        }
                    },
                });
            });
//           清空参数按键响应事件
            $('#btn_clear').click(function () {          //清空按钮操作
                var rowNum=oTab.rows.length;
                for (i=1;i<rowNum;i++)
                {
                    oTab.deleteRow(i);
                    rowNum=rowNum-1;
                    i=i-1;
                }
                num=1;        //清空后序号重置
            });

//           保留字符宽度函数
            function PreFixInterge(num,n){
                //num代表传入的数字，n代表要保留的字符的长度
                return (Array(n).join(0)+num).slice(-n);
            }

        }
        var clockTime;
        function displayTestCCD(inModel) {
            window.clearInterval(clockTime);
            chart.yAxis[0].setTitle({text: "预测值"});
            // 清空所有系列
            var series = chart.series;								// 获取当前表格的所有系列
            while (series.length > 0) {								// 清空所有的折线图
                series[0].remove(false);
            }
            chart.addSeries({									// 将获取到的系列加到表格中
                name: 'z轴位移预测值',
                data: (function () {
                    var data = [],i;
                    var time = (new Date()).getTime();						// 获取当前时间
                    for (i = -10; i <= 0; i += 1) {
                        data.push({
                            x: time + i * 1000,
                            y: 0
                        });
                    }
                    return data;
                }()),
                color: '#FF3333'
            });
            var series = chart.series;
            var temp;
            if(inModel == "bin") {
                temp = new Array(
                    -0.002,0,-0.013,-0.011,-0.007,-0.009,-0.006,-0.006,
                    -0.01,-0.018,-0.019,-0.015,-0.016,-0.012,-0.021,
                    -0.016,-0.016,-0.024,-0.018,-0.025,-0.022,-0.028,
                    -0.024,-0.029,-0.027,-0.032,-0.034,-0.015,-0.013,
                    -0.034,-0.039,-0.045,-0.022,-0.017,-0.017,-0.037,
                    -0.039,-0.041,-0.019,-0.011,-0.016,-0.012,-0.017,
                    -0.027,-0.031,-0.048,-0.042,-0.052,-0.029,-0.039,
                    -0.031,-0.032,-0.029,-0.035,-0.03,-0.022,-0.022,
                    -0.022,-0.03,-0.032,-0.029,-0.033,-0.028,-0.039,
                    -0.032,-0.043,-0.019,-0.028,-0.032,-0.042,-0.034,
                    -0.042,-0.041,-0.045,-0.043,-0.041,-0.04,-0.027,-0.046,
                    -0.036,-0.036,-0.051,-0.053,-0.054,-0.048,-0.055,
                    -0.048,-0.051,-0.052,-0.046,-0.052,-0.053,-0.052,-0.054,
                    -0.053,-0.056,-0.059,-0.061,-0.055,-0.058,-0.06,-0.062,
                    -0.064,-0.065,-0.061,-0.055,-0.065,-0.038,-0.063,-0.054
                );
            }
            else{
                temp = new Array(
                    0.025,0.021,0.001,0.017,-0.006,0.035,0.015,0.03,0.023,
                    0.006,0.022,0.007,0.048,0.004,0.031,0.035,0.024,0.046,
                    0.017,0.059,0.012,0.035,0.035,0.042,0.063,0.025,0.061,
                    0.026,0.066,0.056,0.036,0.075,0.039,0.067,0.047,0.083,
                    0.067,0.047,0.059,0.054,0.089,0.06,0.07,0.06,0.038,0.072,
                    0.06,0.098,0.054,0.072,0.069,0.057,0.092,0.059,0.096,
                    0.072,0.071,0.086,0.088,0.112,0.077,0.088,0.077,0.112,
                    0.098,0.091,0.113,0.068,0.113,0.095,0.086,0.113,0.073,
                    0.107,0.082,0.126,0.101,0.108,0.092,0.076,0.118,0.099,
                    0.114,0.091,0.083,0.112,0.097,0.13,0.08,0.113,0.109,0.1,
                    0.138,0.089,0.13,0.098,0.104,0.121,0.113,0.136,0.088,
                    0.129,0.106,0.121,0.124,0.109,0.132,0.097,0.137,0.123,
                    0.115,0.15,0.099,0.142,0.117,0.139,0.139,0.145,0.133,
                    0.11,0.138,0.123,0.123,0.124,0.11,0.144,0.113,0.15,
                    0.117,0.097,0.135,0.104,0.147,0.109,0.154,0.119,
                    0.116,0.154,0.103,0.147,0.119,0.143,0.138,0.111,
                    0.156,0.115,0.131,0.124,0.142,0.15,0.119,0.168,0.121,
                    0.149,0.139,0.134,0.15,0.105,0.144,0.126,0.139,0.147,
                    0.111,0.143,0.12,0.164,0.145,0.149,0.139,0.116
                );
            }
            var cnt=0;
            clockTime = setInterval(function () {
                var time = (new Date()).getTime();						// 获取当前时间
                series[0].addPoint([time, temp[cnt]], true, true);
                cnt++;
            }, 2000);
        }
    </script>

</head>
<body style="margin-top: 80px;background-color:white;">

<div class="widget-box" style="margin:16px 24px;padding-bottom:15px;text-align: center;">
    <div class="widget-header header-color-purple" style="border-top-left-radius:10px;border-top-right-radius:10px;">
        <h4 style="color:white;font-family: '微软雅黑'">补偿器模型更新</h4>
    </div>
    <div class="widget-body" style="border-bottom-right-radius:10px;border-bottom-left-radius:10px;">
        <div class="widget-main">
            <div class="row">
                <%--设备--%>
                <%--<input id="equipmentId" name="equipmentId"--%>
                <%--style="width: 120px; height: 29px;"--%>
                <%--class="easyui-combobox form-control"--%>
                <%--data-options="required:true">--%>
                <%--&nbsp;&nbsp;&lt;%&ndash;补偿器--%>
                <%--<input id="CompeansatorId" name="CompeansatorId"--%>
                <%--style="width: 120px; height: 29px;"--%>
                <%--class="easyui-combobox form-control"--%>
                <%--data-options="required:true">--%>
                <%--&nbsp;&nbsp;补偿器状态：<span id="CompStatus">未选择</span>&ndash;%&gt;--%>
                <%--<br><br><br>--%>
                <div class="row" style="display:inline-block;align-content: center;margin-right:0px;margin-left:15px">
                    <div class="row-left" style="width: 600px;height:450px;float:left;border: 1px solid gainsboro   ">
                        <p style="margin-top: 5px;" align="center">模型统计参数分析</p>
                        <p align="center">选择模型：
                            <select  id="selectmodel" name="selectmodel"  style="width: 120px; height: 29px;" class="easyui-combobox form-control"editable="disabled" data-options="required:true">
                                <option value="aa" >线性回归</option>
                            </select><br></p>
                        <div style="margin-left: 0px; margin-top: 20px;">
                            <%--通道：<input id="channelId" name="channelId"
                                      style="width: 120px; height: 29px;"
                                      class="easyui-combobox form-control"
                                      data-options="required:true">
                            节点：<input id="monitorId" name="monitorId"
                                      style="width: 120px; height: 29px;"
                                      class="easyui-combobox form-control"
                                      data-options="required:true">--%>
                            通道：<select  id="selectchannel" name="selectchannel"  style="width: 120px; height: 29px;" class="easyui-combobox form-control" editable="disabled"  data-options="required:true">
                                  <option>请选择</option><option>通道1</option><option>通道2</option><option>通道3</option><option>通道4</option><option>通道5</option><option>通道6</option><option>通道7</option><option>通道8</option><option>通道9</option><option>通道10</option><option>通道11</option><option>通道12</option><option>通道13</option>
                                  <option>通道14</option><option>通道15</option><option>通道16</option><option>通道17</option><option>通道18</option><option>通道19</option><option>通道20</option><option>通道21</option><option>通道22</option><option>通道23</option><option>通道24</option><option>通道25</option><option>通道26</option>
                                  <option>通道27</option><option>通道28</option><option>通道29</option><option>通道30</option><option>通道31</option><option>通道32</option><option>常数</option>
                                  </select>
                                <%--<input type="text" id="txt1" />--%>
                            节点：<select  id="selectmonitor" name="selectmonitor"  style="width: 120px; height: 29px;" class="easyui-combobox form-control" editable="disabled"  data-options="required:true">
                                  <option>请选择</option><option>节点1</option><option>节点2</option><option>节点3</option><option>节点4</option><option>节点5</option><option>节点6</option><option>节点7</option><option>节点8</option><option>节点9</option><option>节点10</option><option>节点11</option><option>节点12</option><option>节点13</option>
                                  <option>节点14</option><option>节点15</option><option>节点16</option><option>节点17</option><option>节点18</option><option>节点19</option><option>节点20</option>
                                  </select>
                                <%--<input type="text" id="txt2" />--%>
                            参数：<input type="text" id="txt3"  style="width: 120px; height: 28px;" />
                        </div>
                        <div style="margin-left: 0px; margin-top: 20px;">
                            <input type="button" id="btn_add" value="添加信息" />&emsp;
                            <input type="button" id="btn_clear" value="清空" />&emsp;
                            <input type="button" id="btn_updata" value="参数更新" />&emsp;
                            <%--<input type="submit" id="sub" value="提交" />--%>

                        </div>

                        <table id="tab1" border="0" style="text-align: center; width: 550px; margin-left: 20px;
        margin-top: 20px;">
                            <thead>
                            <tr style="font-size: 15px;font-weight: bold;">
                                <td>
                                    序号
                                </td>
                                <td>
                                    通道
                                </td>
                                <td>
                                    节点
                                </td>
                                <td>
                                    参数
                                </td>
                                <td>
                                    操作
                                </td>
                            </tr>
                            </thead>
                            <tbody>
                            </tbody>
                        </table>
                        <%--<p align="center">该模型拟合后的残差如下:</p>
                        <table style="margin-top: 10px;"align="center">
                            <tr>
                                <td></td>
                                <td align="center">X轴</td>
                                <td align="center">Y轴</td>
                                <td align="center">Z轴</td>
                            </tr>
                            <tr>
                                <td align="center">均值</td>
                                <td align="center">7.86</td>
                                <td align="center">3.34</td>
                                <td align="center">8.60</td>
                            </tr>
                            <tr>
                                <td align="center">方差</td>
                                <td align="center">2.86</td>
                                <td align="center">0.66</td>
                                <td align="center">5.47</td>
                            </tr>
                            <tr>
                                <td align="center">标准差</td>
                                <td align="center">1.69</td>
                                <td align="center">0.81</td>
                                <td align="center">2.34</td>
                            </tr>
                            <tr>
                                <td align="center">峰值</td>
                                <td align="center">2.34</td>
                                <td align="center">2.93</td>
                                <td align="center">3.45</td>
                            </tr>
                            <tr>
                                <td align="center">偏值</td>
                                <td align="center">-0.23</td>
                                <td align="center">0.49</td>
                                <td align="center">2.37</td>
                            </tr>
                        </table>
                        <p style="margin-top: 10px; " align="center">是否符合正态分布: 否
                        <p align="center">以上数据均为静态工况下预测值与ccd测量位移值得差值的统计分析</p>--%>
                        </p>
                    </div>
                    <div class="row-right" style="width:600px;margin-left: 600px;height:450px;border: 1px solid gainsboro   ">
                        <p style="margin-top: 5px;" align="center">模型预测误差历史数据图</p>
                        选择模型：<select  id="selectmodel1" name="selectmodel"  style="width: 120px; height: 29px;" disabled="disabled" class="easyui-combobox form-control " editable="disabled"  data-options="required:true">
                        <option value="aa">线性回归</option>
                    </select>
                        &nbsp; &nbsp;预测对象：<select  id="selectmodel2" name="selectmodel"  style="width: 120px; height: 29px; " disabled="disabled" class="easyui-combobox form-control" editable="disabled"  data-options="required:true">
                        <%--<option>X轴</option>--%>
                        <%--<option>Y轴</option>--%>
                        <option>Z轴</option>
                    </select>
                        <p style="margin-top: 10px; " align="center">模型预测效果图:</p>
                        <div>
                            <div id="container" style="width: 500px; height: 200px; margin: 0 auto" align="center"></div>
                        </div>
                        <p  align="center">&nbsp;&nbsp; 推荐模型：模型1&nbsp; &nbsp;&nbsp; &nbsp;是否能够下载: 否
                            &nbsp; &nbsp;&nbsp; <button class="btn btn-sm btn-success center" style="margin-top: 0px;" onclick="" disabled="disabled">下载模型</button>
                        </p>
                    </div>
                </div>
                <div class="row" style="align-content: center;margin-top:5px;margin-left: 15px" >
                    <div class="row-left" style="width: 98%;height:50px;float:left;border: 1px solid gainsboro   ">

                        <p style="margin-top: 6px;" align="center">在此手动更新模型:
                            <input id="bin_file_path" type="input" value="录入待更新模型代码"
                                   style="margin-left:20px;width: 200px;border: 2px solid #1a67bd ;"
                                   onfocus="javascript:if(this.value=='录入待更新模型代码')this.value='';">
                            <button id="picker" style="display: none;"></button>
                            <button id="pickerbtn" class="btn btn-success center" style="margin-left: 30px ;margin-bottom:5px;border-width: 4px;font-size: 13px;
            padding: 4px 9px;line-height: 1;" >选择bin文件
                            </button>
                            <button id="uploadbtn" class="btn btn-success center" style="margin-left: 30px ;margin-bottom:5px;border-width: 4px;font-size: 13px;
            padding: 4px 9px;line-height: 1;">下载模型</button>
                        </p>


                    </div>
                </div>

            </div>
        </div>
    </div>
</div>

<script type="text/javascript">

    $('#pickerbtn').click(function () {
        $('#picker input[type="file"]').click();
    });

    var uploader = WebUploader.create({
        // swf文件路径
        swf: 'mintor/compensatormanage/js/Uploader.swf',
        // 文件接收服务端。
        server: 'compensator/uploadbin',
        // 选择文件的按钮。可选。
        // 内部根据当前运行是创建，可能是input元素，也可能是flash.
        pick: '#picker',
        resize: false,                            // 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
        duplicate:true,                           //是否可重复选择同一文件
        fileNumLimit: 1,                          // 发送限制单文件
        fileSingleSizeLimit: 5 * 1024 * 1024,    // 500M
        fileVal:"file"                            //指明参数名称，后台也用这个参数接收文件
    });

    // 选择了文件后，在文件被添加进队列前
    uploader.on( 'beforeFileQueued', function( file ) {             // 发送限制单文件
        var fnum = uploader.getFiles().length;                        // 如果有文件在队列中
        if(fnum>0) uploader.reset();                                  // 清除队列
    });
    // 当有文件被添加进队列的时候
    uploader.on( 'fileQueued', function( file ) {
        var name=file.name;
        var fileName = name.substring(name.lastIndexOf(".")+1).toLowerCase();
        if(fileName !=='bin'){
            alert("请选择bin格式文件上传！");
            uploader.reset();
            return false;
        }
        $('#bin_file_path').val(file.name);
    });
    uploader.on( 'error', function( type ) {             // 选择文件出错
        if(type=="F_EXCEED_SIZE"){
            alert("附件不能大于5M");
        }
    });

    uploader.on( 'uploadComplete', function( file ) {
        $( '#'+file.id ).find('.progress').fadeOut();
        uploader.reset();
        $('#bin_file_path').val("录入待更新模型代码");
    });
    $('#uploadbtn').on( 'click', function() {
        uploader.upload();
    });
    uploader.on( 'uploadAccept', function( file, response ) {
        if ( response.success==false ) {
            // 通过return false来告诉组件，此文件上传有错。
            alert('上传失败\r\n'+response.msg);
            return false;
        }
        else{alert('上传成功');
            $.ajax({
                cache: false,
                url: "compensator/updatemodel",			// 根据通道类型来加载传感器编号
                data: {updateorder:"SRet_bin",cptNum:"SCPT-001"},
                type: "POST",
                dataType: "json",
                success: function (result) {					// 加载传感器编号到传感器编号组合框
                    if(result.success ==true){
                        $('#uploadbtn').on( 'click', function() {
                            uploader.upload();
                        });
                        displayTestCCD("bin");
                    }else{
                        alert("failed");
                        return false;
                    }
                },
            });
        }
    });


</script>


</body>
</html>